<link rel="stylesheet" href="${resource(file:'hex-floor.css', dir:'css')}" type="text/css" media="all" />

<div id="designer-title" class="ui-widget-header">Room - Title</div>
<div id="designer-body">
	<div id="scroller" class="grid">
		<div id="floor">
			<g:set var="MAX_COLUMN" value="${7}"/>
			<g:set var="MAX_ROW" value="${20}"/>
			<g:each var="i" in="${0..(MAX_COLUMN*MAX_ROW-1)}">
				<g:set var="row" value="${((i - i%MAX_COLUMN)/MAX_COLUMN)}"/>
		    	<g:set var="col" value="${ (i % MAX_COLUMN) * 2 + (row.intValue() % 2)}"/>
		    	<g:set var="even" value="${ row.intValue() % 2 }"/>
		    	<g:set var="image" value="../images/hex/hex_grid.png"/>
		    	<%
					if( col > 9 ){
						image = "../images/hex/hex_tile.png";
					}else if( col > 3){
						image = "../images/hex/hex_grass.png";
					}
				 %>
		    	
		    	<img src="${image}" class='r${row} c${col} ftile' />
		    	<!-- <img src="${ col > 2 ? '../images/wood2_sm.png' : '../images/grass_sm.png'}" class='r${row} c${even?'O':'E'}${col} ftile' /> -->
		    </g:each>
		    
		    <%--
		    <img src="../images/hex/hex-wall-sm.png" class="r0 cO0 ftile"/>
		    <img src="../images/hex/hex-wall-sm.png" class="r1 cE0 ftile"/>
		    <img src="../images/hex/hex-wall-sm.png" class="r2 cO1 ftile"/>
		    <img src="../images/hex/hex-wall-sm.png" class="r3 cE1 ftile"/>
		    <g:each var="i" in="${0..(MAX_COLUMN*MAX_ROW-1)}"><%
					final int MAXC = 7;
					final int MAXR = 20;
					int row = ((i - i%MAXC)/MAXC);
					int col = i % MAXC;
					if(col == 0){
						if(row % 2 == 0)
							println ".r${row} {top:${(row/2)*70}px;}"
						else
							println ".r${row} {top:${(((row-row%2)/2)*70)+35}px;}"
					}							
		    		if(row % 2 == 0){
						println ".cO${col} {left:${(col)*135}px;}"
					}else{
						println ".cE${col} {left:${(col)*135+70}px;}"
					}
		    	%></g:each>
		    
		    <g:if test="${(row.intValue() % 2) == 0}">
		    		r${row}c${(i%hcount)} {position:absolute; top:${(row/2)*70};left : ${(i%hcount)*135};}}
	    	</g:if>
			<g:else>
	    		r${row}c${(i%hcount)} {position:absolute; top:${(((row-row.intValue()%2)/2)*70)+35};left : ${(i%hcount)*135+70}; zindex : ${i*10}}
			</g:else> 
			<img src='../images/grass_sm.png' style="position:absolute; top:${(row/2)*70};left : ${(i%hcount)*135};zindex : ${i*10}}"/>
		    <img src='../images/grass_sm.png' style="position:absolute; top:${(((row-row.intValue()%2)/2)*70)+35};left : ${(i%hcount)*135+70}; zindex : ${i*10}}"/>
		     --%>
		</div>
		<img id="ftile-highlight" src="../images/grid_slant.png" style="display:none;z-index:99;" />
		<img id="player" src="../images/man.png" style="position:absolute; top:${(2*70)-90}px; left:${(2*135)+10}px;z-index:100;" />
		<img id="house" src="../images/house.png" style="position:absolute; top:-90px; left:445px;" />
	</div>
</div>
